<template>
     <div id="Score">
        <div class="jx-content part1">
             <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
                  <el-form-item label="班级信息 :" >
                    <el-cascader
                    class="cascader"
                    :options="data"
                    expand-trigger="hover"
                    :props="cascaderconfig"
                    change-on-select
                    v-model="selectedOptions"
                    ></el-cascader>
                 </el-form-item>
                 <el-form-item label="学生信息 :" prop="info">
                     <el-input type="text" v-model="form.info" style="width: 50%;" placeholder="请输入学生信息" auto-complete="off"></el-input>
                 </el-form-item>

                 <el-form-item >
                    <div class="button-style" @click="search">搜 索</div>
                </el-form-item>
                <div class="fr downs">
                    <div class="button-style" @click="downs">下 载</div>
                </div>
             </el-form>
              <div class="tips"> 注：此列表按照默认班级检索</div>
              <div class="table">
                    <el-table :data="tableDataList"   style="width: 100%">
                        <el-table-column  prop="index" label="序号" width="100px">
                            <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                        </el-table-column>
                        <el-table-column  prop="className" label="班级名称"> </el-table-column>
                        <el-table-column  prop="endedMessage" label="状态" ></el-table-column>
                        <el-table-column  prop="studentName" label="学生姓名"> </el-table-column>
                        <el-table-column  prop="practice" label="随堂练习">
                            <template slot-scope="scope">
                                累计值：{{scope.row.practice.total}}
                                <el-button @click="detailFile(scope.row.studentName,scope.row.id,scope.row.practice.details)" type="text" style="vertical-align: inherit">详情</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="experiment"
                            label="实验报告">
                            <template slot-scope="scope">
                                累计值：{{scope.row.experiment.total}}
                                <el-button @click="detailFn(scope.row.studentName,scope.row.id,scope.row.experiment.details)" type="text" style="vertical-align: inherit">详情</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="count" label="考试次数" > </el-table-column>
                        <el-table-column  prop="scoreList" label="考试成绩" :render-header="customField" >
                            <!-- <el-table-column  prop="scoreList" label="考试成绩"   >  -->
                            <template slot-scope="scope"  >
                                    <span  @mouseover="scores(scope.row.count,scope.row.scoreList)" class="scores" :title="title">
                                        {{scope.row.scoreList.join(',') }}
                                </span>
                            </template>
                        </el-table-column>
                   </el-table>
              </div>
              <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
               ></el-pagination>
         </div>
          <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" width="500px" >
             <el-table
                :data="Datalist"
                style="width: 100%; padding:0" >
                <el-table-column
                    type="index"
                    label="序号"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="chapterName"
                    label="章节名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="score"
                    label="得分">
                </el-table-column>
             </el-table>
          </el-dialog>
    </div>

</template>

<script>
    export default {
        data () {
            return {
                title:'',
                //课程id
                courseId:'',
                data:[],
                _cascaderconfig: {
                  value: "name",
                  label: "name",
                },
                get cascaderconfig() {
                  return this._cascaderconfig;
                },
                set cascaderconfig(value) {
                  this._cascaderconfig=value;
                },
                //获取班级所有id集合
                idlist:[],
                Datalist:[ ],
                dialogFormVisible:false,
                dialogTitle:'',
                tableDataList: [],
                 //三级联动
                 selectedOptions:[],
                 currentPage: 1,
                 pagesize: 10,
                 totalCount: 1000,
                  form:{
                    //信息
                    info:'',
                    //年份
                    chooseYear:'',
                    optionsYear:[],
                    //班级
                    chooseClass:'',
                    optionsclass:[],
                   //状态
                    choosestatus:'',
                    optionstatus: []
                },
            }
        },
        created() {
             this.courseId = this.$localstorage.getLocalStorage('setCourseId')
             this.ClassList()

        },
        methods: {
            //鼠标经过显示考试详情
            scores(count,scoreList){
                let self =this
                self.titles=''
                self.times=''
                scoreList.forEach((item,index)=>{
                    if(index==0){
                        self.times='一共考试'+count+'次, '
                    }
                    self.titles+='第'+(index+1)+'次'+",成绩是"+item+'分。'
                    self.title =  self.times+ self.titles
                })

            },
             //三级联动
            ClassList(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/search/list-class?allFlag=true&defaultClassFlag=true').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.data = res.data
                        self.filterInitData(res.data)
                        self.ChangeList()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //过滤数据获得默认值
            filterInitData(data){
                let self = this;
                data.forEach(function(item) {
                if (item.defaultedClass == true) {
                    self.selectedOptions.push(item.name)
                }
                if (item.children) {
                    item.children.forEach(function(it) {
                    if (it.defaultedClass == true) {
                        self.selectedOptions.push(it.name)
                    }
                    if (it.children) {
                        it.children.forEach(function(itChild) {
                        if (itChild.defaultedClass == true) {
                            self.selectedOptions.push(itChild.name)
                            }
                        })
                    }
                    })
                }
                });
               // console.log(self.selectedOptions, 99)
                return self.selectedOptions
            },
            //获取id集合
              ChangeList(){
                let self = this
                if(self.selectedOptions[0]===undefined ||  self.selectedOptions[0]=='全部'){
                    self.selectedOptions[0]=''
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[1]===undefined || self.selectedOptions[1]=='全部'){
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[2]===undefined || self.selectedOptions[2]=='全部'){
                    self.selectedOptions[2]=''
                }
                self.$http.post('/tes/course/'+self.courseId+'/search/class',{
                    status :self.selectedOptions[0],
                    grade :self.selectedOptions[1],
                    name: self.selectedOptions[2]
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      self.idlist=res.data
                      self.getInit()
                    }else if(res.code == '404'){
                        self.$message(res.message)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
              },

             //初始化获取列表
            getInit(){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/grade-statistics',{
                    userInfo :self.form.info,
                    classIdList :self.idlist ,
                    pageNum:self.currentPage,
                    pageSize:self.pagesize
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.tableDataList =  res.data.content
                        self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //下载
            downs(){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/grade-statistics/download',{
                    userInfo :self.form.info,
                    classIdList : self.idlist ,
                },{responseType: 'blob'}) .then((response) => {
                    let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                    console.log(response);
                    let fileName = self.selectedOptions[2]+'成绩统计.xls'
                    let url = window.URL.createObjectURL(blob);
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = url;
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                }).catch(err => {
                      console.log(err)
                })
            },
            //关闭
            closeDialog(){
              //  this.$refs.form.resetFields()
            },
            //实验报告
            detailFn(name,id,details){
              this.dialogFormVisible=true
              this.dialogTitle=name+'学生实验报告详情'
              this.Datalist = details

            },
            //随堂成绩弹窗
            detailFile(name,id,details){
              this.dialogFormVisible=true
              this.dialogTitle=name+'学生随堂练习成绩详情'
              this.Datalist = details
            },
            //提示
            // customFieldColumn (h, { column, $index }) {
            //     return (
            //         h('span', [
            //         h('span', column.label + ' '),
            //         h('el-tooltip', {
            //             props: {
            //             effect: 'dark',
            //             class:'hh',
            //             //content: '可在右上角（更多操作 - 自定义字段设置）中配置！',
            //             placement: 'bottom'
            //             }
            //         })
            //         ])
            //     )
            // },
             //提示
            customField (h, { column, $index }) {
                return (
                    h('span', [
                    h('span', column.label + ' '),
                    h('el-tooltip', {
                        props: {
                        effect: 'dark',
                        class:'hh',
                        content: '按照考试时间顺序排列成绩',
                        placement: 'bottom'
                        }
                    }, [
                        h('i', {
                          class: 'iconfont icon-wenti-m',
                          style:{
                              color:'#385899',
                              fontSize:'14px'
                          }
                        }),

                    ])
                    ])
                )
            },
             //搜索
            search(){
                this.currentPage = 1
                this.ChangeList()
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.ChangeList()
            },
        },

    }
</script>
<style scoped>
    .scores{
        width:103px;
        display:inline-block;
        padding: 10px 0;
        cursor: pointer;
    }
    .el-button--text:hover{
         color: #1277eb;
    }
    .downs{
        margin-right: 10px
    }
    .el-dialog__wrapper>>>.el-dialog__body{
        padding: 20px 25px;
    }
    .el-input-number.is-controls-right>>>.el-input-number__increase{
        line-height: 16px;
    }
    .el-input-number{
        position: relative;
        display: inline-block;
        line-height: 38px;
        overflow: hidden;
        width: auto;
    }
    .el-input-number>>>.el-input-number__increase{
        top: 4px;
    }
    .el-input-number.is-controls-right>>>.el-input-number__decrease{
         bottom: 4px;
    }
    .el-input-number>>>.el-input .el-input__inner{
        width: 100px;
    }
    .cascader{
        margin-top: -4px
    }
</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #Score {
    width: $width;
    margin: 0px auto;
    color: #727272;
    .icon-wenti-m{
        color: red
    }
    .part1{
        margin: 0px;
        .el-form-item{
             margin-bottom:0px;

         }
        .tips{
            margin-top: 15px;
             color:#1277eb;
        }
    }
    .table{
        margin: 20px 0;
        i{
            font-size: 14px;
        }
    }
}
</style>
